<template>
  <div class="c-pb32" v-if="pointConfig && companyAuth">
    <section class="header-box">
      <img class="c-w100 c-hh340 c-pa c-p-l0 c-p-t0 c-pz1" src="@/assets/i/wap/points/bg_top.png" alt="">
      <div class="c-p c-pz9 c-flex-row c-aligni-center c-justify-sb c-pl24 c-pt30 c-fs24 c-fc-white">
        <div class="c-flex-row c-aligni-center">
          <img class="c-ww30 c-hh30" src="@/assets/i/wap/points/icon_points.png" alt="">
          <span class="c-pl14 c-pr10 c-fs36">{{curIntegral}}</span>
          <i class="iconfont c-fs20 c-fc-white" @click="clickIntegraldDetail">&#xe635;</i>
        </div>
        <div v-if="companyAuth.enablePoints == 1 && companyAuth.enablePointMallModule == 1" @click="goMall" class="c-ph20 c-hh50 c-fc-white c-bg-white c-bg-xxlred c-flex-row c-flex-center c-mr24 c-br25">
          <i class="iconfont c-fs24 c-fc-white c-mr12">&#xe6e9;</i>
          {{customPointName}}商城
        </div>
      </div>
      <div class="sign-box c-flex-column c-aligni-center c-pv40 c-mt20 c-box-shadow3">
        <div v-if="todayHadSign == 1" class="c-flex-row c-aligni-baseline">
          <div class="c-fs22 c-fc-xblack">已连续签到</div>
          <div class="c-fw-b c-textAlign-c c-fs56 c-ph14 c-fc-xxlred">{{myContinuityDay}}</div>
          <div class="c-fs22 c-fc-xblack c-mr10">天</div>
          <i class="iconfont c-fs20 c-fc-sgray" v-if="pointConfig.signRule" @click="clickShowSignRule">&#xe8e8;</i>
        </div>
        <div class="c-flex-row c-aligni-center c-fs24" v-if="todayHadSign == 0">
          <span>坚持签到，坚持学习！</span>
          <div v-if="pointConfig.signRule" @click="clickShowSignRule" class="c-pv4 c-ph4">
            <i class="iconfont c-fs20 c-fc-sgray">&#xe8e8;</i>
          </div>
        </div>
        <!-- 日签 -->
        <section class="c-flex-row c-pt40 c-w100">
          <div v-for="(item,index) in signInfoList" :key="index" class="c-flex-grow1 c-w0 c-flex-column c-flex-center">
            <div class="c-ww48 c-hh48 c-brp50 c-fc-white c-fs20 c-flex-row c-flex-center c-p" :class="index < todayIndex || (index == todayIndex && todayHadSign == 1) ? 'c-bg-fa':'btn-red'">
              <img v-show="(index > todayIndex || (index == todayIndex && todayHadSign != 1)) && item.specialDay == 1" class="img-huangguang" src="@/assets/i/wap/points/icon_huangguang.png" alt="">
              <i v-if="index < todayIndex && item.isSign == 1" class="iconfont c-fc-green c-fs20">&#xe8f8;</i>
              <span v-else-if="index < todayIndex && item.isSign == 0" class="c-ww48 c-hh48 c-brp50 c-flex-row c-flex-center c-fc-sgray c-fs14">未签到</span>
              <i v-else-if="index == todayIndex && todayHadSign == 1" class="iconfont c-fc-green c-fs20">&#xe8f8;</i>
              <span v-else-if='index >= todayIndex && item.specialDay == 1' class="c-ww48 c-hh48 c-brp50 c-flex-row c-flex-center">?</span>
              <span v-else-if="pointConfig.pointsOnCheckingIn * 1 > 0" class="c-ww48 c-hh48 c-brp50 c-flex-row c-flex-center">+{{pointConfig.pointsOnCheckingIn}}</span>
            </div>
            <!-- 今天已签到 -->
            <div v-if="todayIndex == index" class="c-textAlign-c c-pt10 c-fs20">今天</div>
            <div v-else :class="index < todayIndex ? 'c-fc-sgray':''" class="c-pt10 c-fs20 c-textAlign-c">{{item.day.substring(5)}}</div>
          </div>
        </section>
        <div @click="clickSignToday" v-if="todayHadSign == 0" class="c-mt20 btn-red c-ww300 c-hh70 c-flex-row c-flex-center c-fs26 c-fc-white c-br36">
          签到
        </div>
        <div @click="clickSharePost" v-if="pointConfig.enableDaySignShow == 1&&todayHadSign == 1" class="c-mt20 btn-red c-ww300 c-hh70 c-flex-row c-flex-center c-fs26 c-fc-white c-br36">
          已签到，去炫耀
        </div>
      </div>
    </section>
    <h2 v-if="companyAuth.enableRecommend == 1 && pointConfig.recommendStatus == 1 && pointConfig.recommendReword == 1" class="c-bg-whtie c-ph24 c-pv40 c-fs28 c-fw-b">
      推荐任务
    </h2>
    <section v-if="companyAuth.enableRecommend == 1 && pointConfig.recommendStatus == 1 && pointConfig.recommendReword == 1" class="c-flex-row c-aligni-center c-ph24">
      <img class="c-ww80 c-hh80" src="@/assets/i/wap/points/icon_recom.png" alt="">
      <div class="c-flex-grow1 c-w0 c-pl20">
        <div class="c-fs26 c-fw400">邀请好友</div>
        <div class="c-pt20 c-fc-gray c-fs22">获取更多喜悦</div>
      </div>
      <div @click="clickRecommend" class="c-fc-xxlred c-bd1-xxlred c-ww110 c-hh48 c-fs22 c-flex-row c-flex-center c-br25">去推荐</div>
    </section>

    <h2 v-if="showNewTask" class="c-bg-whtie c-ph24 c-pt40 c-fs28 c-fw-b c-flex-row c-aligni-center">
      <span class="c-flex-grow1 c-w0">新手任务</span>
    </h2>
    <h2 v-if="showEnable" class="c-bg-whtie c-ph24 c-pt40 c-fs28 c-fw-b c-flex-row c-aligni-center">
      <span class="c-flex-grow1 c-w0">成长任务</span>
    </h2>
    <section v-if="pointConfig.enableBindPhonePoint == 1 && pointConfig.pointsOnBindPhone > 0" class="c-flex-row c-aligni-center c-ph24 c-pt40 c-pb10">
      <img class="c-ww80 c-hh80" src="@/assets/i/wap/points/icon_bind.png" alt="">
      <div class="c-flex-grow1 c-w0 c-pl20">
        <div @click="clickBindTip" class="c-fs26 c-fw400">绑定手机号，保护账号安全<i class="c-ml10 iconfont c-fs20 c-fc-sgray">&#xe8e8;</i></div>
        <div class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.pointsOnBindPhone}}</div>
      </div>
      <div @click="clickBindMobile" class="c-ww110 c-hh48 c-fs22 c-flex-row c-flex-center c-br25" :class="userMobile == '' || userMobile == null ? 'c-fc-xxlred c-bd1-xxlred' : 'c-fc-gray c-bd1-gray'">{{userMobile == '' || userMobile == null ? '去绑定' : '已完成'}}</div>
    </section>
    <section v-if="pointConfig.enableRegisterPoint == 1 && pointConfig.pointsOnRegistration > 0" class="c-flex-row c-aligni-center c-ph24 c-pt40 c-pb10">
      <img class="c-ww80 c-hh80" src="@/assets/i/wap/points/icon_invite.png" alt="">
      <div class="c-flex-grow1 c-w0 c-pl20">
        <div @click="clickInviteTip" class="c-fs26 c-fw400">邀请好友<i class="c-ml10 iconfont c-fs20 c-fc-sgray">&#xe8e8;</i></div>
        <div class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.pointsOnRegistration}}</div>
      </div>
      <div @click="clickInviteFriends" class="c-fc-xxlred c-bd1-xxlred c-ww110 c-hh48 c-fs22 c-flex-row c-flex-center c-br25">去邀请</div>
    </section>

    <h2 v-if="showDailyTask" class="c-bg-whtie c-ph24 c-pt40 c-fs28 c-fw-b c-flex-row c-aligni-center">
      <span class="c-flex-grow1 c-w0">每日任务</span>
    </h2>
    <section v-if="(pointConfig.enableShareColumnPoint == 1 && pointConfig.pointsOnSharingColumn > 0 && pointModel == 1) || (pointConfig.enableShareColumn == 1 && pointModel == 2)" class="c-flex-row c-aligni-center c-ph24 c-pt40 c-pb10">
      <img class="c-ww80 c-hh80" src="@/assets/i/wap/points/icon_share_column.png" alt="">
      <div class="c-flex-grow1 c-w0 c-pl20">
        <div @click="shareColumnTip" class="c-fs26 c-fw400">邀请好友看专栏<i class="c-ml10 iconfont c-fs20 c-fc-sgray">&#xe8e8;</i></div>
        <div v-if="pointModel == 1" class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.pointsOnSharingColumn}}</div>
        <div v-else class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.columnPoint}}</div>
        <!-- <div v-else class="c-pt20 c-fc-gray c-fs22 c-flex-row c-aligni-center">
          <div class="c-ww100 c-hh8 c-br4 c-bg-f6 c-p">
            <div class="c-pa c-p-l0 c-p-t0 c-hh8 c-br4 back-gredient" :style="'width:calc(' + pointConfig.hasShareColumnPoints * 100 / pointConfig.columnTopLimit + '%);'"></div>
          </div>
          <div class="c-ml16">{{pointConfig.hasShareColumnPoints}}/{{pointConfig.columnTopLimit}}</div>
        </div> -->
      </div>
      <div @click="clickShareColumn" class="c-fc-xxlred c-bd1-xxlred c-ww110 c-hh48 c-fs22 c-flex-row c-flex-center c-br25">做任务</div>
    </section>
    <section v-if="(pointConfig.enableShareLiveFlowPoint == 1 && pointConfig.pointsOnSharingLiveFlow > 0 && pointModel == 1) || (pointConfig.enableShareLiveFlow == 1 && pointModel == 2)" class="c-flex-row c-aligni-center c-ph24 c-pt40 c-pb10">
      <img class="c-ww80 c-hh80" src="@/assets/i/wap/points/icon_share_live.png" alt="">
      <div class="c-flex-grow1 c-w0 c-pl20">
        <div @click="shareLiveTip" class="c-fs26 c-fw400">邀请好友看直播<i class="c-ml10 iconfont c-fs20 c-fc-sgray">&#xe8e8;</i></div>
        <div v-if="pointModel == 1" class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.pointsOnSharingLiveFlow}}</div>
        <div v-else class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.liveFlowPoint}}</div>
        <!-- <div v-else class="c-pt20 c-fc-gray c-fs22 c-flex-row c-aligni-center">
          <div class="c-ww100 c-hh8 c-br4 c-bg-f6 c-p">
            <div class="c-pa c-p-l0 c-p-t0 c-hh8 c-br4 back-gredient" :style="'width:calc(' + pointConfig.hasShareLiveFlowPoints * 100 / pointConfig.liveFlowTopLimit + '%);'"></div>
          </div>
          <div class="c-ml16">{{pointConfig.hasShareLiveFlowPoints}}/{{pointConfig.liveFlowTopLimit}}</div>
        </div> -->
      </div>
      <div @click="clickShareLive" class="c-fc-xxlred c-bd1-xxlred c-ww110 c-hh48 c-fs22 c-flex-row c-flex-center c-br25">做任务</div>
    </section>
    <section v-if="(pointConfig.enableShareComboPoint == 1 && pointConfig.pointsOnSharingCombo > 0 && pointModel == 1) || (pointConfig.enableShareCombo == 1 && pointModel == 2)" class="c-flex-row c-aligni-center c-ph24 c-pt40 c-pb10">
      <img class="c-ww80 c-hh80" src="@/assets/i/wap/points/icon_share_package.png" alt="">
      <div class="c-flex-grow1 c-w0 c-pl20">
        <div @click="sharePackageTip" class="c-fs26 c-fw400">邀请好友看知识套餐<i class="c-ml10 iconfont c-fs20 c-fc-sgray">&#xe8e8;</i></div>
        <div v-if="pointModel == 1" class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.pointsOnSharingCombo}}</div>
        <div v-else class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.comboPoint}}</div>
        <!-- <div v-else class="c-pt20 c-fc-gray c-fs22 c-flex-row c-aligni-center">
          <div class="c-ww100 c-hh8 c-br4 c-bg-f6 c-p">
            <div class="c-pa c-p-l0 c-p-t0 c-hh8 c-br4 back-gredient" :style="'width:calc(' + pointConfig.hasShareComboPoints * 100 / pointConfig.comboTopLimit + '%);'"></div>
          </div>
          <div class="c-ml16">{{pointConfig.hasShareComboPoints}}/{{pointConfig.comboTopLimit}}</div>
        </div> -->
      </div>
      <div @click="clickSharePackage" class="c-fc-xxlred c-bd1-xxlred c-ww110 c-hh48 c-fs22 c-flex-row c-flex-center c-br25">做任务</div>
    </section>
    <section v-if="(((pointConfig.enableShareArticlePoint == 1 && pointConfig.pointsOnSharingArticle > 0) || (pointConfig.enableShareVideoPoint == 1 && pointConfig.pointsOnSharingVideo > 0) || (pointConfig.enableShareAudioPoint == 1 && pointConfig.pointsOnSharingAudio > 0)) && pointModel == 1) || (pointConfig.enableShareCourse == 1 && pointModel == 2)" class="c-flex-row c-aligni-center c-ph24 c-pt40 c-pb10">
      <img class="c-ww80 c-hh80" src="@/assets/i/wap/points/icon_share.png" alt="">
      <div class="c-flex-grow1 c-w0 c-pl20">
        <div @click="clickShareTip" class="c-fs26 c-fw400">邀请好友看课程<i class="c-ml10 iconfont c-fs20 c-fc-sgray">&#xe8e8;</i></div>
        <div v-if="pointModel == 1" class="c-pt20 c-fc-gray c-fs22">{{shareCourseText}}</div>
        <div v-else class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.coursePoint}}</div>
        <!-- <div v-else class="c-pt20 c-fc-gray c-fs22 c-flex-row c-aligni-center">
          <div class="c-ww100 c-hh8 c-br4 c-bg-f6 c-p">
            <div class="c-pa c-p-l0 c-p-t0 c-hh8 c-br4 back-gredient" :style="'width:calc(' + pointConfig.hasShareCoursePoints * 100 / pointConfig.courseTopLimit + '%);'"></div>
          </div>
          <div class="c-ml16">{{pointConfig.hasShareCoursePoints}}/{{pointConfig.courseTopLimit}}</div>
        </div> -->
      </div>
      <div @click="clickShare" class="c-fc-xxlred c-bd1-xxlred c-ww110 c-hh48 c-fs22 c-flex-row c-flex-center c-br25">做任务</div>
    </section>
    <section v-if="(((pointConfig.enableWatchVideoPoint == 1 && pointConfig.pointsOnBuyingVideo > 0) || (pointConfig.enableListenAudioPoint == 1 && pointConfig.pointsOnBuyingAudio > 0)) && pointModel == 1) || (pointConfig.enableWatchListen == 1 && pointModel == 2)" class="c-flex-row c-aligni-center c-ph24 c-pt40 c-pb10">
      <img class="c-ww80 c-hh80" src="@/assets/i/wap/points/icon_course.png" alt="">
      <div class="c-flex-grow1 c-w0 c-pl20">
        <div @click="clickCourseTip" class="c-fs26 c-fw400">观看视频音频<i class="c-ml10 iconfont c-fs20 c-fc-sgray">&#xe8e8;</i></div>
        <div v-if="pointModel == 1" class="c-pt20 c-fc-gray c-fs22">{{studyCourseText}}</div>
        <div v-else class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.watchListenPoint}}</div>
        <!-- <div v-else class="c-pt20 c-fc-gray c-fs22 c-flex-row c-aligni-center">
          <div class="c-ww100 c-hh8 c-br4 c-bg-f6 c-p">
            <div class="c-pa c-p-l0 c-p-t0 c-hh8 c-br4 back-gredient" :style="'width:calc(' + pointConfig.hasWatchCoursePoints * 100 / pointConfig.watchListenTopLimit + '%);'"></div>
          </div>
          <div class="c-ml16">{{pointConfig.hasWatchCoursePoints}}/{{pointConfig.watchListenTopLimit}}</div>
        </div> -->
      </div>
      <div @click="clickLookVideo" class="c-fc-xxlred c-bd1-xxlred c-ww110 c-hh48 c-fs22 c-flex-row c-flex-center c-br25">去观看</div>
    </section>
    <section v-if="(pointConfig.enableWatchLiveFlowPoint == 1 && pointConfig.pointsOnWatchLiveFlow > 0 && pointModel == 1) || (pointConfig.enableWatchLiveFlow == 1 && pointModel == 2)" class="c-flex-row c-aligni-center c-ph24 c-pt40 c-pb10">
      <img class="c-ww80 c-hh80" src="@/assets/i/wap/points/icon_live.png" alt="">
      <div class="c-flex-grow1 c-w0 c-pl20">
        <div @click="watchLiveTip" class="c-fs26 c-fw400">观看直播视频<i class="c-ml10 iconfont c-fs20 c-fc-sgray">&#xe8e8;</i></div>
        <div v-if="pointModel == 1" class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.pointsOnWatchLiveFlow}}</div>
        <div v-else class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.watchLiveFlowPoint}}</div>
        <!-- <div v-else class="c-pt20 c-fc-gray c-fs22 c-flex-row c-aligni-center">
          <div class="c-ww100 c-hh8 c-br4 c-bg-f6 c-p">
            <div class="c-pa c-p-l0 c-p-t0 c-hh8 c-br4 back-gredient" :style="'width:calc(' + pointConfig.hasWatchLiveFlowPoints * 100 / pointConfig.watchLiveTopLimit + '%);'"></div>
          </div>
          <div class="c-ml16">{{pointConfig.hasWatchLiveFlowPoints}}/{{pointConfig.watchLiveTopLimit}}</div>
        </div> -->
      </div>
      <div @click="clickShareLive" class="c-fc-xxlred c-bd1-xxlred c-ww110 c-hh48 c-fs22 c-flex-row c-flex-center c-br25">去观看</div>
    </section>
    <section v-if="pointConfig.enableTotalWatchCourse == 1 && pointModel == 2" class="c-flex-row c-aligni-center c-ph24 c-pt40 c-pb10">
      <img class="c-ww80 c-hh80" src="@/assets/i/wap/points/icon_watch.png" alt="">
      <div class="c-flex-grow1 c-w0 c-pl20">
        <div @click="watchTotalTip" class="c-fs26 c-fw400">视听学习{{pointConfig.courseEveryTime}}分钟<i class="c-ml10 iconfont c-fs20 c-fc-sgray">&#xe8e8;</i></div>
        <div class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.totalCousePoint}}</div>
        <!-- <div class="c-pt20 c-fc-gray c-fs22 c-flex-row c-aligni-center">
          <div class="c-ww100 c-hh8 c-br4 c-bg-f6 c-p">
            <div class="c-pa c-p-l0 c-p-t0 c-hh8 c-br4 back-gredient" :style="'width:calc(' + pointConfig.hasTotalWatchCoursePoints * 100 / pointConfig.totalCourseTopLimit + '%);'"></div>
          </div>
          <div class="c-ml16">{{pointConfig.hasTotalWatchCoursePoints}}/{{pointConfig.totalCourseTopLimit}}</div>
        </div> -->
      </div>
      <div @click="clickLookVideo" class="c-fc-xxlred c-bd1-xxlred c-ww110 c-hh48 c-fs22 c-flex-row c-flex-center c-br25">去学习</div>
    </section>
    <section v-if="pointConfig.enableReadArticle == 1 && pointModel == 2" class="c-flex-row c-aligni-center c-ph24 c-pt40 c-pb10">
      <img class="c-ww80 c-hh80" src="@/assets/i/wap/points/icon_imgtext.png" alt="">
      <div class="c-flex-grow1 c-w0 c-pl20">
        <div @click="imgTotalTip" class="c-fs26 c-fw400">图文学习{{pointConfig.articleEveryTime}}分钟<i class="c-ml10 iconfont c-fs20 c-fc-sgray">&#xe8e8;</i></div>
        <div class="c-pt20 c-fc-gray c-fs22">+{{pointConfig.readArticlePoint}}</div>
        <!-- <div class="c-pt20 c-fc-gray c-fs22 c-flex-row c-aligni-center">
          <div class="c-ww100 c-hh8 c-br4 c-bg-f6 c-p">
            <div class="c-pa c-p-l0 c-p-t0 c-hh8 c-br4 back-gredient" :style="'width:calc(' + pointConfig.hasTotalWatchArticlePoints * 100 / pointConfig.readArticleTopLimit + '%);'"></div>
          </div>
          <div class="c-ml16">{{pointConfig.hasTotalWatchArticlePoints}}/{{pointConfig.readArticleTopLimit}}</div>
        </div> -->
      </div>
      <div @click="clickLookVideo" class="c-fc-xxlred c-bd1-xxlred c-ww110 c-hh48 c-fs22 c-flex-row c-flex-center c-br25">去学习</div>
    </section>
    <h2 v-if="consumeTaskList.length > 0" class="c-bg-whtie c-ph24 c-pt40 c-fs28 c-fw-b c-flex-row c-aligni-center">
      <span class="c-flex-grow1 c-w0">消费任务</span>
    </h2>
    <section v-for="(item, cIndex) in consumeTaskList" :key="cIndex">
      <div class="c-flex-row c-aligni-center c-ph24 c-pt40 c-pb10" v-if="item.type != 3 || (item.type == 3 && Number(rmb2Points) > 0)">
        <img class="c-ww80 c-hh80" :src="require(item.type == 1 || item.type == 3 ? '@/assets/i/wap/points/icon_deal.png' : '@/assets/i/wap/points/icon_money.png')" alt="">
        <div class="c-flex-grow1 c-w0 c-pl20">
          <div class="c-fs26 c-fw400" @click="clickConsumeTaskTip(item)">{{item.type == 1 ? `每交易成功${item.number}笔` : item.type == 2 ? `每交易满${item.amount}元` : `每消费1元奖励${item.points}${customPointName}`}}<i class="c-ml10 iconfont c-fs20 c-fc-sgray">&#xe8e8;</i></div>
          <div class="c-pt20 c-fc-gray c-fs22">+{{item.points}}</div>
        </div>
        <div class="c-fc-xxlred c-bd1-xxlred c-ww110 c-hh48 c-fs22 c-flex-row c-flex-center c-br25" @click="clickToIndex">去逛逛</div>
      </div>
    </section>
    <loading-status-tem :noData="noneShow" :noDataText="'暂无相关任务'"></loading-status-tem>
    <cj-popup v-model="showGetPoint" round class="c-bg-transparent c-pt80 mt-80">
      <article class="c-hh400 c-p c-ww540">
        <img class="bg-get-ponit" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/points/img_get_points.png" alt="">
        <section class="c-p c-pz9 c-flex-column c-flex-center">
          <h1 class="c-pt100 c-fs32 c-fw-b c-fc-sblack">恭喜您获得<span class="c-fc-xxlred">{{signDayPoints}}</span>{{companyAuth.integrateName1}}</h1>
          <h1 class="c-pt30 c-pb40 c-fs24 c-fw-b c-fc-sblack">连续签到第<span class="c-fc-xxlred">{{myContinuityDay}}</span>天<span v-if="pointConfig.rewardDay">,连续签到{{pointConfig.rewardDay}}天有惊喜哦！</span></h1>
          <div @click="showGetPoint = false" class="btn-red c-ww360 c-hh70 c-flex-row c-flex-center c-fs26 c-fc-white c-br36">
            我知道了
          </div>
          <div @click="clickIntegraldDetail" class="c-fc-gray c-flex-row c-flex-center c-fs22 c-pt30">我的{{companyAuth.integrateName1}}<i class="iconfont c-ml10 c-fc-sgray c-fs12">&#xe85a;</i></div>
        </section>
      </article>
    </cj-popup>
    <cj-popup v-model="showGetGift" round class="c-bg-transparent overflow-inherit">
      <article class="c-p ww620">
        <img class="bg-get-gitf" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/points/bg_sign_gift.png" alt="">
        <section class="c-p c-pz9 c-flex-column c-aligni-center">
          <h1 class="c-fc-sblown c-pb48 c-fs38 c-fw-b c-fs-scblack">恭喜您获得签到礼包</h1>
          <section class="c-hh250 c-ww460 c-contexty-scroll">
            <div v-if="signDayPoints > 0" class="c-hh120 c-bg-white c-mb20 c-ph24 c-flex-row c-aligni-center">
              <img class="c-hh70 c-ww70" src="@/assets/i/wap/points/icon_points.png" alt="">
              <div class="c-flex-grow1 c-w0 c-pl20 c-flex-column c-justify-center c-textAlign-l">
                <h3 class="c-fs30 c-fw-b">{{companyAuth.integrateName1}}</h3>
                <p class="c-pt10 c-fs20 c-fc-gray">奖励{{signDayPoints}}{{companyAuth.integrateName1}}</p>
              </div>
              <div class="c-fs18 c-fw-b c-ww88 c-hh36 c-lh36 c-fc-white button-bg c-textAlign-c c-br20" @click="clickIntegraldDetail">查看</div>
            </div>
            <coupon-item-com v-for="(item, index) in couponList" :key="index" :couponInfo="item" :showFooter="false" :size="'small'" class="c-textAlign-l" :class="index == couponList.length - 1 ? '':'c-mb20'"
            >
            </coupon-item-com>
          </section>
          <div class="c-pt72 c-fs24 c-fc-white c-textAlign-c" v-if="signDayPoints > 0 && couponList.length == 0">
            可在个人中心-‘我的{{customPointName}}’入口查看
          </div>
          <div class="c-pt72 c-fs24 c-fc-white c-textAlign-c" v-else-if="signDayPoints == 0 && couponList.length > 0">
            可在个人中心-‘优惠券’入口查看
          </div>
          <div class="c-pt72 c-fs24 c-fc-white c-textAlign-c" v-else>
            可在个人中心-‘我的{{customPointName}}’、‘优惠券’入口查看
          </div>
        </section>
      </article>
    </cj-popup>
    <cj-popup v-model="showTipDialog" round>
      <div class="c-ww540 c-textAlign-c">
        <h2 class="c-fs28 c-pt48 c-pb40">{{tipDialogTitle}}</h2>
        <p class="c-fs24 c-ph40 c-pb40 c-textAlign-l c-maxh360 c-contexty-auto" v-html="tipDialogContent"></p>
        <div @click="showTipDialog = false" class="c-fc-xxlred c-fs26 c-bd-t1 c-hh80 c-flex-row c-flex-center">我知道了</div>
      </div>
    </cj-popup>
    <points-day-sign v-if="signDayInfo && signDayInfo.signCardType == 1" :signDayInfo="showSignDay ? signDayInfo : null" :showSignDay="showSignDay" @closeSignDay="showSignDay = false"></points-day-sign>
    <custom-certificate v-if="signDayInfo && signDayInfo.signCardType == 2" :isShow="showSignDay" :qrcodeUrl="signDayInfo.qrcodeUrl" :headimgurl="signDayInfo.headimgurl" :nickname="signDayInfo.nickname" :customizeImage="signDayInfo.customizeImage" :customizeControl="signDayInfo.customizeControl" @closeCertificate="showSignDay = false"></custom-certificate>
  </div>
</template>


<script>
import pointsDaySign from './pointsDaySign.vue'
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import customCertificate from "@/components/templates/common/customCertificate.vue";
import couponItemCom from "@/components/templates/couponItemCom.vue";
import { utilJs } from "@/utils/common.js";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
let isClicking = false;
export default {
  name: "IntegralIndex",
  components: {
    pointsDaySign,
    loadingStatusTem,
    customCertificate,
    couponItemCom
  },
  props: [],
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      rmb2Points: localStorage.getItem("rmb2Points"),
      userMobile: localStorage.getItem("uMobile"),
      showTip: false,
      companyAuth: null,
      noneShow: false,
      showGetPoint: false,
      showGetGift: false,
      curIntegral: 0,
      pointConfig: null,
      todayHadSign: 0,
      myContinuityDay: 0,
      studyCourseText: '',
      shareCourseText: '',
      signDayPoints: 0,
      signInfoList: [],
      couponList: [],
      signDayInfo: null,
      showSignDay: false,
      showTipDialog: false,
      todayIndex: 0,
      tipDialogTitle: '',
      tipDialogContent: '',
      pointNavName: '',
      pointModel: '',
      consumeTaskList: [], // 消费任务设置
      integralLimit: null, // 每日积分上限
      bindPhoneSetting: null,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  computed: {
    // 新手任务
    showNewTask: function () {
      // 绑定手机号 邀请好友
      let isShow = (this.pointConfig.enableBindPhonePoint == 1 || this.pointConfig.enableRegisterPoint == 1) && this.pointModel == 2;
      return isShow;
    },
    //成长任务
    showEnable: function () {
      let isShow = (this.pointConfig.enableBindPhonePoint == 1 || this.pointConfig.enableRegisterPoint == 1 || this.pointConfig.enableWatchVideoPoint == 1 || this.pointConfig.enableListenAudioPoint == 1 ||
        this.pointConfig.enableShareArticlePoint == 1 || this.pointConfig.enableShareVideoPoint == 1 ||
        this.pointConfig.enableRegisterPoint == 1 || this.pointConfig.enableShareAudioPoint == 1) && this.pointModel == 1;
      return isShow;
    },
    //每日任务
    showDailyTask: function () {
      let isShow = (this.pointConfig.enableShareColumn == 1 || this.pointConfig.enableShareLiveFlow == 1 ||
        this.pointConfig.enableShareCombo == 1 || this.pointConfig.enableShareCourse == 1 ||
        this.pointConfig.enableWatchListen == 1 || this.pointConfig.enableWatchLiveFlow == 1 || this.pointConfig.enableTotalWatchCourse == 1 || this.pointConfig.enableReadArticle == 1) && this.pointModel == 2;
      return isShow;
    },
  },
  watch: {},
  methods: {
    initData() {
      this.showTip = false;
      this.noneShow = false;
      this.showGetPoint = false;
      this.showGetGift = false;
      this.showSignDay = false;
      this.showTipDialog = false;
      this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
      this.curIntegral = 0;
      this.todayHadSign = 0;
      this.myContinuityDay = 0;
      this.signDayPoints = 0;
      this.todayIndex = 0;
      this.pointConfig = null;
      this.signDayInfo = null;
      this.studyCourseText = '';
      this.shareCourseText = '';
      this.pointModel = '';
      this.userMobile = localStorage.getItem("uMobile");
      this.signInfoList = [];
      this.couponList = [];
      this.consumeTaskList = [];
      this.integralLimit = null;
    },
    // 去积分商城
    goMall() {
      this.$routerGo(this, "push", {path: "/member/myIntegral/integralMall"});
    },
    clickShowSignRule() {
      this.tipDialogTitle = `签到规则`;
      this.tipDialogContent = this.pointConfig.signRule.replace(/\n/g, '<br/>');
      this.showTipDialog = true;
    },
    clickCourseTip() {
      let content = '';
      if (this.pointModel == 1) {
        if (this.pointConfig.enableWatchVideoPoint == 1) {
          content += `观看视频可以获得${this.pointConfig.pointsOnBuyingVideo}${this.companyAuth.integrateName1}，`
        }
        if (this.pointConfig.enableListenAudioPoint == 1) {
          content += `收听音频可以获得${this.pointConfig.pointsOnBuyingAudio}${this.companyAuth.integrateName1}，`
        }
        content += `${this.companyAuth.integrateName1}数根据观看的时长来决定，不满一分钟则不计算（每个音频，视频只能获取一次）`
      } else {
        content = `每有效观看一个视频或音频，可获取${this.pointConfig.watchListenPoint}个${this.customPointName}，一天最多获取${this.pointConfig.watchListenTopLimit}个${this.customPointName}，可反复获取`
      }

      this.tipDialogTitle = `${this.pointModel == 1 ? '学习课程' : '观看视频音频'}赚${this.companyAuth.integrateName1}`;
      this.tipDialogContent = content;
      this.showTipDialog = true;
    },
    clickShareTip() {
      let content = '';
      if (this.pointModel == 1) {
        if (this.pointConfig.enableShareVideoPoint == 1) {
          content += `分享视频可获得${this.pointConfig.pointsOnSharingVideo}${this.companyAuth.integrateName1}，`
        }
        if (this.pointConfig.enableShareAudioPoint == 1) {
          content += `分享音频可获得${this.pointConfig.pointsOnSharingAudio}${this.companyAuth.integrateName1}，`
        }
        if (this.pointConfig.enableShareArticlePoint == 1) {
          content += `分享文章可获得${this.pointConfig.pointsOnSharingArticle}${this.companyAuth.integrateName1}`
        }
        content += `（第一次分享有${this.companyAuth.integrateName1}，再分享则无）`;
      } else {
        content = `每分享一次课程，可获取${this.pointConfig.coursePoint}个${this.customPointName}，一天最多获取${this.pointConfig.courseTopLimit}个${this.customPointName}`
      }
      this.tipDialogTitle = `分享课程赚${this.companyAuth.integrateName1}`;
      this.tipDialogContent = content;
      this.showTipDialog = true;
    },
    clickInviteTip() {
      let content = `成功邀请一位学员可获得${this.pointConfig.pointsOnRegistration}${this.companyAuth.integrateName1}`
      this.tipDialogTitle = `邀请好友赚${this.companyAuth.integrateName1}`;
      this.tipDialogContent = content;
      this.showTipDialog = true;
    },
    clickBindTip() {
      let content = `本任务只会针对仍未绑定手机号的用户生效`
      this.tipDialogTitle = `绑定手机号赚${this.companyAuth.integrateName1}`;
      this.tipDialogContent = content;
      this.showTipDialog = true;
    },
    clickConsumeTaskTip(item) {
      let content = `用户每${item.type == 1 ? `累计到${item.number}笔交易数，可奖励${item.points}${this.customPointName}` : item.type == 2 ? `次付款满${item.amount}元，可奖励${item.points}${this.customPointName}` : `次消费1元，可奖励${item.points}${this.customPointName}，消费5元奖励${5 * (item.points)}${this.customPointName}`}，可多次获取，${this.integralLimit && this.integralLimit.consumeSelect == 1 ? `每日获取上限为${this.integralLimit.consumeLimit}${this.customPointName}，` : ''}支持${item.scopeType == 1 ? '全部' : '部分'}知识产品和实物产品。`
      this.tipDialogTitle = `消费任务赚${this.companyAuth.integrateName1}`;
      this.tipDialogContent = content;
      this.showTipDialog = true;
    },
    sharePackageTip() {
      let content = '';
      if (this.pointModel == 1) {
        content = `分享知识套餐可获得${this.pointConfig.pointsOnSharingCombo}${this.companyAuth.integrateName1}${this.pointModel == 1 ? '（第一次分享有' + this.companyAuth.integrateName1 + ',再分享无' + this.companyAuth.integrateName1 + '）' : ''}`
      } else {
        content = `每分享一次知识套餐，可获取${this.pointConfig.comboPoint}个${this.customPointName}，一天最多获取${this.pointConfig.comboTopLimit}个${this.customPointName}`
      }
      this.tipDialogTitle = `分享知识套餐赚${this.companyAuth.integrateName1}`;
      this.tipDialogContent = content;
      this.showTipDialog = true;
    },
    shareColumnTip() {
      let content = '';
      if (this.pointModel == 1) {
        content = `分享专栏可获得${this.pointConfig.pointsOnSharingColumn}${this.companyAuth.integrateName1}（第一次分享有${this.companyAuth.integrateName1},再分享无${this.companyAuth.integrateName1}）`
      } else {
        content = `每分享一次专栏，可获取${this.pointConfig.columnPoint}个${this.customPointName}，一天最多获取${this.pointConfig.columnTopLimit}个${this.customPointName}`
      }
      this.tipDialogTitle = `分享专栏赚${this.companyAuth.integrateName1}`;
      this.tipDialogContent = content;
      this.showTipDialog = true;
    },
    shareLiveTip() {
      let content = '';
      if (this.pointModel == 1) {
        content = `分享直播可获得${this.pointConfig.pointsOnSharingLiveFlow}${this.companyAuth.integrateName1}（第一次分享有${this.companyAuth.integrateName1},再分享无${this.companyAuth.integrateName1}）`
      } else {
        content = `每分享一次直播，可获取${this.pointConfig.liveFlowPoint}个${this.customPointName}，一天最多获取${this.pointConfig.liveFlowTopLimit}个${this.customPointName}`
      }
      this.tipDialogTitle = `分享直播赚${this.companyAuth.integrateName1}`;
      this.tipDialogContent = content;
      this.showTipDialog = true;
    },
    watchLiveTip() {
      let content = '';
      if (this.pointModel == 1) {
        content = `观看视频直播可获得${this.pointConfig.pointsOnWatchLiveFlow}${this.companyAuth.integrateName1}，${this.customPointName}数根据观看时长来决定，不满一分钟不计算，60分钟后不再累计`
      } else {
        content = `每有效观看一个直播，可获取${this.pointConfig.watchLiveFlowPoint}个${this.customPointName}，一天最多获取${this.pointConfig.watchLiveTopLimit}个${this.customPointName}`
      }
      this.tipDialogTitle = `观看直播赚${this.companyAuth.integrateName1}`;
      this.tipDialogContent = content;
      this.showTipDialog = true;
    },
    watchTotalTip() {
      let content = `有效观看视频或音频时长达${this.pointConfig.courseEveryTime}分钟，可获取${this.pointConfig.totalCousePoint}个${this.customPointName}，一天最多获取${this.pointConfig.totalCourseTopLimit}个${this.customPointName}，第二天可再次获取`
      this.tipDialogTitle = `视听学习赚${this.companyAuth.integrateName1}`;
      this.tipDialogContent = content;
      this.showTipDialog = true;
    },
    imgTotalTip() {
      let content = `有效阅读图文时长达${this.pointConfig.articleEveryTime}分钟，可获取${this.pointConfig.readArticlePoint}个${this.customPointName}，一天最多获取${this.pointConfig.readArticleTopLimit}个${this.customPointName}，第二天可再次获取`
      this.tipDialogTitle = `图文学习赚${this.companyAuth.integrateName1}`;
      this.tipDialogContent = content;
      this.showTipDialog = true;
    },
    clickSharePost() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.showSignDay = true;
    },
    hiddenDialog() {
      if (this.pointConfig.enableDaySignShow == 1) {
        if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
          return;
        }
        this.showSignDay = true;
      }
    },
    clickSignToday() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (isClicking) {
        return;
      }
      isClicking = true;
      utilJs.postMethod(`${global.apiurl}members/pointSign`, {}, (res) => {
        isClicking = false;
        this.todayHadSign = 1;
        this.myContinuityDay += 1;
        if (res.point * 1 > 0 && !res.redeemInfo) {
          this.signDayPoints = res.point;
          this.showGetPoint = true;
        } else if (res.redeemInfo) {
          this.signDayPoints = res.point * 1;
          this.showGetGift = true;
          this.couponList = res.redeemInfo;
        }
        if (this.pointConfig.enableDaySignShow == 1) {
          this.getDaySign();
        }
      }, () => {
        isClicking = false;
      });
    },
    getPointDesc() {
      utilJs.getMethod(global.apiurl + 'members/pointDesc', (res) => {
        if (localStorage.getItem('companyId') == 'n9v8') {
          this.showTip = true;
        }
        this.pointNavName = res.pointNavName;
        this.curIntegral = res.myPoints * 1;
        this.pointConfig = res.pointConfig;
        this.pointModel = res.pointConfig.pointModel;
        this.todayHadSign = res.todayHadSign;
        this.myContinuityDay = res.myContinuityDay;
        let shareText = '';
        if (this.pointConfig.enableShareVideoPoint == 1) {
          shareText += `视频+${this.pointConfig.pointsOnSharingVideo}，`
        }
        if (this.pointConfig.enableShareAudioPoint == 1) {
          shareText += `音频+${this.pointConfig.pointsOnSharingAudio}，`
        }
        if (this.pointConfig.enableShareArticlePoint == 1) {
          shareText += `图文+${this.pointConfig.pointsOnSharingArticle}，`
        }
        this.shareCourseText = shareText.slice(0, -1);
        let studyText = '';
        if (this.pointConfig.enableWatchVideoPoint == 1) {
          studyText += `视频+${this.pointConfig.pointsOnBuyingVideo}，`
        }
        if (this.pointConfig.enableListenAudioPoint == 1) {
          studyText += `音频+${this.pointConfig.pointsOnBuyingAudio}，`
        }
        this.studyCourseText = studyText.slice(0, -1);
        this.signInfoList = res.weekSignInfo;
        let nowDate = new Date().getTime();
        let dateStr = utilJs.dateFormat(nowDate);
        for (let item of this.signInfoList) {
          if (dateStr == item.day) {
            break;
          }
          this.todayIndex++;
        }
        if (res.pointConfig.enablePoints == 1) {
          this.noneShow = false
        } else {
          this.noneShow = true
        }
        if (res.pointConfig.enableDaySignShow == 1 && this.todayHadSign == 1) {
          this.getDaySign();
        }
      });
    },
    // 获取消费任务设置
    getConsumeTaskList() {
      utilJs.getMethod(global.apiurl + 'members/consumeTaskList', (res) => {
        this.consumeTaskList = res.list;
        this.integralLimit = res.topLimit;
      });
    },
    getDaySign() {
      utilJs.getMethod(global.apiurl + 'members/pointDaySign', (res) => {
        let wordArr = [];
        let signInfo = res;
        for (let item of signInfo.word) {
          if (item.content) {
            wordArr.push({
              content: item.content
            })
          }
        }
        signInfo.word = wordArr;
        this.signDayInfo = signInfo;
      })
    },
    //点击积分明细
    clickIntegraldDetail(e) {
      this.$routerGo(this, "push", { path: "/member/myIntegral/integralDetail" });
    },
    clickRank(e) {
      //点击排行榜
      this.$routerGo(this, "push", { path: "/member/myIntegral/integralRank" });
    },
    //点击推荐有礼
    clickRecommend() {
      let toPath = '/member/recommend/recommendCenter';
      this.$routerGo(this, "push", { path: toPath });
    },
    clickLookVideo(e) {
      //点击看视频
      this.$routerGo(this, "push", { path: "/homePage/course/courseList" });
    },
    clickShare(e) {
      //点击分享课程
      // this.$routerGo(this, "push", { path: '/homePage/spread/spreadIndex' })
      // this.$routerGo(this, "push", { path: '/homePage/spread/SpreadMoney' })
      this.$routerGo(this, "push", { path: "/homePage/course/courseList" });
    },
    clickInviteFriends(e) {
      //点击邀请好友
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadIndex' })
    },
    //点击绑定手机
    clickBindMobile(e) {
      if (this.userMobile != '' && this.userMobile != null) {
        return;
      }
      utilJs.goBindMobile({isIntegrate: 1});
    },
    //点击分享知识套餐
    clickSharePackage(e) {
      this.$routerGo(this, "push", { path: `/homePage/package/packageList` })
    },
    //点击分享专栏
    clickShareColumn(e) {
      this.$routerGo(this, "push", { path: `/homePage/column/columnList` })
    },
    //点击分享直播
    clickShareLive(e) {
      this.$routerGo(this, "push", { path: `/homePage/live/liveList` })
    },
    clickToIndex() {
      this.$routerGo(this, "replace", { path: '/' })
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    this.initData();
    getBindPhoneSetting(1002).then(res => {
      this.bindPhoneSetting = res;
    });
    setDocumentTitle('每日签到');
    this.getPointDesc();
    this.wechatShare();
    this.getConsumeTaskList();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.header-box {
  position: relative;
  width: 100%;
  height: 12.2rem;
}
.sign-box {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 2.2rem;
  background-color: #fff;
  border-radius: 0.5rem;
  /* height: 9rem; */
  z-index: 10;
}
.btn-red {
  background: linear-gradient(
    90deg,
    rgba(255, 129, 104, 1),
    rgba(254, 92, 76, 1),
    rgba(255, 87, 87, 1)
  );
}
.bg-get-ponit {
  position: absolute;
  left: 0;
  top: -2rem;
  width: 13.5rem;
  height: 12rem;
  z-index: 1;
}
.bg-get-gitf {
  position: absolute;
  left: 0;
  top: -1rem;
  width: 15.5rem;
  height: 14rem;
  z-index: 1;
}
.share-btn {
  position: absolute;
  top: 1rem;
  right: 0.6rem;
  width: 2.2rem;
  height: 1rem;
  background: linear-gradient(
    120deg,
    rgba(255, 214, 50, 1),
    rgba(255, 188, 72, 1)
  );
  border-radius: 0.5rem;
}
.img-huangguang {
  position: absolute;
  left: 0.05rem;
  top: -0.3rem;
  width: 1.1rem;
  height: 0.6rem;
}
.integrate-mall {
  background: rgba(255, 255, 255, 0.1);
}
.back-gredient {
  background: linear-gradient(
    90deg,
    rgba(255, 129, 104, 1),
    rgba(254, 92, 76, 1),
    rgba(255, 87, 87, 1)
  );
}
.ww620 {
  width: 15.5rem;
}
.mt-80 {
  margin-top: -2rem;
}
.overflow-inherit {
  overflow-y: inherit;
}
</style>

